<html>
<head>
<script>
	window.onload = function() {
		var dx = -1;
		var dy = 0;
		var x = 125;
		var y = 125;
		setInterval(function() {
			var canvas = document.getElementById('canvas1');
			var ctx = canvas.getContext('2d');
			ctx.clearRect(0, 0, 600, 600);
			ctx.fillStyle = 'rgb(255, 0, 0)';
			ctx.strokeStyle = 'rgb(255, 0, 0)';
			ctx.fillRect(25, 25, 100, 100);
			ctx.clearRect(45, 45, 60, 60);
			ctx.strokeRect(50, 50, 50, 50);
			ctx.fillStyle = 'rgb(0, 0, 255)';
			ctx.strokeStyle = 'rgb(0, 0, 255)';
			ctx.beginPath();
			x += dx;
			y += dy;
			ctx.moveTo(x, y);
			ctx.lineTo(x + 80, y);
			ctx.lineTo(x, y + 80);
			ctx.fill();
			if (x == 25) {
				dx = 1;
			}
			if (y == 25) {
				dy = 1;
			}
			if (x == 125 && y == 125) {
				if (dx == 1) {
					dy = -1
					dx = 0;
				}
				if (dy == 1) {
					dx = -1;
					dy = 0;
				}
			}
		}, 50);
	}
</script>
</head>
<body>
	<canvas id="canvas1" height="600" width="600"> 
      </canvas>
</body>
</html>